<template>
      <el-container style="height:100%">
         <el-aside width="200px">
            <el-tree ref="tree" :lazy="true" 
            :data="fileData" 
            v-bind="$attrs" v-on="$listeners" 
            :props="defaultProps"
              node-key="path" :load="loadNode" 
              @node-click="handleNodeClick"></el-tree>
          </el-aside>
          <el-container>
            <el-header height="50px">
              <el-input style="width:calc( 100% - 70px)" size="mini" placeholder="输入根目录\\电脑名\目录名:例如\\DESKTOP-XXX\tmp" v-model="rootPath"></el-input>
              <el-button size="mini" style="float:right" @click="query" type="primary">搜索</el-button>
            </el-header>
              <el-main style="border:1px solid grey;padding: 0px 0px 0px 10px;margin-left:20px">
                <ul class="mc-file-chooser-content">
                  <li v-for="(item,index) in fileList" :key="index" @click="clickFile(item)">{{item.label}}</li>
                </ul>
              </el-main>
              <el-footer  height="50px" style="padding-top:10px">
                <el-input style="width:calc( 100% - 70px)" size="mini" placeholder="选择文件" readonly v-model="chooseFile"></el-input>
                <el-button style="float:right" size="mini"  type="primary" @click="choose">确定</el-button>
              </el-footer>
          </el-container>
			</el-container>
</template>

<script>
export default {
    name: 'mc-file-chooser',
    data () {
        return {
          fileList: [],
          fileData: [],
          defaultProps: {
            children: 'children',
            label: 'label',
            isLeaf: 'leaf'
          },
          // 默认首次查询 所有文件夹 dir 查询所有文件夹 file 查询当前文件夹下文件 (不包含下级文件)
          type: 'dir',
          rootPath:this.data,
          chooseFile:""
        }
    },
    props:{
        //此处的value 就是父亲的v-model
        'data' : {type:String,default:''},
        'mcUrl':{type:String,default:''}
    },
    watch:{

    },
    mounted () {
      if(this.rootPath){
        this.queryFile(this.rootPath,'file',(res)=>{
            this.fileList = res
        })
      }
      
    },
    methods:{
      queryFile(path,type,callback){
        if(!path){
          return;
        }
        if(!path.startsWith("\\\\")){
          this.$message({type:"error",message:"地址必须以\\\\开头的局域网共享地址"})
          return;
        }
        var axios = this.axios||window.axios;
        axios({
          keepUrl:true,
          method:"GET",
          url:this.mcUrl,
          params: {
            path: path,
            type: type,
          },
        }).then(response=>{
          response = response.data;
          if(response.code == 0) {
            if(callback){
              callback(response.data);
            }
          }
        })
      },
      loadNode(node, resolve) {
        var data = node.data;
        if(Array.isArray(data)){//初始化的时候 好奇怪竟然是数组
          data = {path:this.data}
        }
        this.queryFile(data.path,'dir',(res)=>{
            resolve(res);
        })
      },
      // 点击节点触发事件
      handleNodeClick(data) {
        this.queryFile(data.path,'file',(res)=>{
            this.fileList = res
        })
      },
      choose(){
          this.$emit("choose",{file:this.chooseFile})
      },
      query(){
          this.queryFile(this.rootPath,'dir',(res)=>{
              this.fileData = res;
          })
          this.queryFile(this.rootPath,'file',(res)=>{
            this.fileList = res
        })
      },
      clickFile(item){
        this.chooseFile = item.path;
      }
    }
}
</script>

<style lang="scss">
    .mc-file-chooser-content{
      padding: 0px;
      li{
        list-style: none;
        cursor:pointer;
        background-color: #f5f3f3;
        margin-top: 2px;
      }
      li:hover{
        background-color: grey;
      }
    }
</style>
